
function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;').replace(/"/g, '&quot;');
}

function addIcon(id, icon ,iconPosition)
{
    hasIcon = $( '#' + id ).parent().hasClass('input-group');
    if( ! hasIcon )
    {
        if(iconPosition === 'left' || iconPosition === 'both') $('<span class="input-group-addon">' +icon+ '</span>').insertBefore('#' + id);
        $('#' + id).parent().children().wrapAll( '<div class="input-group"></div>' );
        if(iconPosition === 'right' || iconPosition === 'both') $('<span class="input-group-addon">' +icon+ '</span>').insertAfter('#' + id);
    }
}

function removeIcon(id) {
    
    hasIcon = $( '#' + id ).parent().hasClass('input-group');
    if(hasIcon)
    {
        $( '#' + id ).siblings().remove();
        $( '#' + id ).unwrap();
    }
}

function placeIcons()
{
    var iconPosition = $('#icon-position').val();
            
    addIcon('username', '<i class="fa fa-user"></i>', iconPosition);
    addIcon('first-name', '<i class="fa fa-user"></i>', iconPosition);
    addIcon('last-name', '<i class="fa fa-user"></i>', iconPosition);
    addIcon('address', '<i class="fa fa-home"></i>', iconPosition);
    addIcon('password', '<i class="fa fa-lock"></i>', iconPosition);
    addIcon('confirm-password', '<i class="fa fa-unlock"></i>', iconPosition);
    addIcon('birthdate', '<i class="fa fa-calendar"></i>', iconPosition);
    addIcon('mobile', '<i class="fa fa-mobile"></i>', iconPosition);
    addIcon('country', '<i class="fa fa-globe"></i>', iconPosition);
}

function removeIcons()
{
    removeIcon('username');
    removeIcon('first-name');
    removeIcon('last-name');
    removeIcon('address');
    removeIcon('password');
    removeIcon('confirm-password');
    removeIcon('birthdate');
    removeIcon('mobile');
    removeIcon('country');
}

function resetForm(reset) {
    
    $('#orientation').val('form-vertical');
    $('#columns').val('1');
    $('#ratio').val('2');
    
    $('#inline-orientation').val('');
    
    $('#bordered').prop('checked', true);
    $('#bordered').bootstrapSwitch('state', true);

    $('#striped').prop('checked', false);
    $('#striped').bootstrapSwitch('state', false);
    
    $('#condensed').prop('checked', false);
    $('#striped').bootstrapSwitch('state', false);
    
    $('#legend').prop('checked', true);
    $('#legend').bootstrapSwitch('state', true);
    
    $('#bold-legend').prop('checked', true);
    $('#bold-legend').bootstrapSwitch('state', true);
    
    $('#legend-position').val('align-left');
    $('#button-position').val('align-right');
   
    $('#bold-label').prop('checked', true);
    $('#bold-label').bootstrapSwitch('state', true);
    
    $('#input-size').val('col-12');
    $('#input-vertical-size').val('');
    $('#label-position').val('align-left');

    $('#icon').prop('checked', false);
    $('#icon').bootstrapSwitch('state', true);
    
    $('#icon-position').val('left');
    
    if(reset) {
        $('.shown-default').slideDown();
        $('.hidden-default').slideUp();
    } else {
        $('.shown-default').show();
        $('.hidden-default').hide();
    }
}

$(function(){

    // pretty print
    prettyPrint();

    // initialize switches
    $('.switch').bootstrapSwitch({
        size: 'small',
        onColor: 'primary',
        offColor: 'default'
    });
    
    // date-picker
    $("#birthdate").datepicker({
        viewMode: 2,
        autoclose: true
    });
    
    // reset switches
    resetForm(false);
    
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var code = $.trim( htmlEntities( $('#form-settings').html() ) );
        $('#pretty-code').removeClass('prettyprinted');
        
        $('#pretty-code').html( code );
        $('#copy-code').html( code );
        
//        document.write(code);
        
        prettyPrint();
        $("#copy-code").snippet("html",{style:"ide-eclipse",clipboard:"http://localhost/bootstrap/plugins/snippet/ZeroClipboard.swf"});
        
//        $("#copy-code").snippet("html",{style:"ide-eclipse",clipboard:"http://localhost/bootstrap/plugins/snippet/ZeroClipboard.swf"});

    });
    
    

    $('#orientation').change(function() {
        
        // form class
        $('#form-settings form').removeClass('form-inline inline-top inline-bottom stacked-left stacked-right');
        $('#form-settings form').removeClass('form-horizontal');
        $('#form-settings form').removeClass('form-vertical');
        $('#form-settings form').addClass( $(this).val() );
        
        // label class
        $('#form-settings .form-group > .control-label').removeClass('col');
        $('#form-settings .form-group > .control-label').removeClass('col1 col-1 span1 span-1 col-lg-1 col-md-1 col-sm-1 col-sx-1');
        $('#form-settings .form-group > .control-label').removeClass('col2 col-2 span2 span-2 col-lg-2 col-md-2 col-sm-2 col-sx-2');
        $('#form-settings .form-group > .control-label').removeClass('col3 col-3 span3 span-3 col-lg-3 col-md-3 col-sm-3 col-sx-3');
        $('#form-settings .form-group > .control-label').removeClass('col4 col-4 span4 span-4 col-lg-4 col-md-4 col-sm-4 col-sx-4');
        $('#form-settings .form-group > .control-label').removeClass('col5 col-5 span5 span-5 col-lg-5 col-md-5 col-sm-5 col-sx-5');
        $('#form-settings .form-group > .control-label').removeClass('col6 col-6 span6 span-6 col-lg-6 col-md-6 col-sm-6 col-sx-6');
        $('#form-settings .form-group > .control-label').removeClass('col7 col-7 span7 span-7 col-lg-7 col-md-7 col-sm-7 col-sx-7');
        $('#form-settings .form-group > .control-label').removeClass('col8 col-8 span8 span-8 col-lg-8 col-md-8 col-sm-8 col-sx-8');
        $('#form-settings .form-group > .control-label').removeClass('col9 col-9 span9 span-9 col-lg-9 col-md-9 col-sm-9 col-sx-8');
        $('#form-settings .form-group > .control-label').removeClass('col10 col-10 span1 span-10 col-lg-10 col-md-10 col-sm-10 col-sx-10');
        $('#form-settings .form-group > .control-label').removeClass('col11 col-11 span1 span-11 col-lg-11 col-md-11 col-sm-11 col-sx-11');
        $('#form-settings .form-group > .control-label').removeClass('col12 col-12 span12 span-12 col-lg-12 col-md-12 col-sm-12 col-sx-12');

        // control-group class
        $('#form-settings .form-group > .control-group').removeClass('col');
        $('#form-settings .form-group > .control-group').removeClass('col1 col-1 span1 span-1 col-lg-1 col-md-1 col-sm-1 col-sx-1');
        $('#form-settings .form-group > .control-group').removeClass('col2 col-2 span2 span-2 col-lg-2 col-md-2 col-sm-2 col-sx-2');
        $('#form-settings .form-group > .control-group').removeClass('col3 col-3 span3 span-3 col-lg-3 col-md-3 col-sm-3 col-sx-3');
        $('#form-settings .form-group > .control-group').removeClass('col4 col-4 span4 span-4 col-lg-4 col-md-4 col-sm-4 col-sx-4');
        $('#form-settings .form-group > .control-group').removeClass('col5 col-5 span5 span-5 col-lg-5 col-md-5 col-sm-5 col-sx-5');
        $('#form-settings .form-group > .control-group').removeClass('col6 col-6 span6 span-6 col-lg-6 col-md-6 col-sm-6 col-sx-6');
        $('#form-settings .form-group > .control-group').removeClass('col7 col-7 span7 span-7 col-lg-7 col-md-7 col-sm-7 col-sx-7');
        $('#form-settings .form-group > .control-group').removeClass('col8 col-8 span8 span-8 col-lg-8 col-md-8 col-sm-8 col-sx-8');
        $('#form-settings .form-group > .control-group').removeClass('col9 col-9 span9 span-9 col-lg-9 col-md-9 col-sm-9 col-sx-8');
        $('#form-settings .form-group > .control-group').removeClass('col10 col-10 span1 span-10 col-lg-10 col-md-10 col-sm-10 col-sx-10');
        $('#form-settings .form-group > .control-group').removeClass('col11 col-11 span1 span-11 col-lg-11 col-md-11 col-sm-11 col-sx-11');
        $('#form-settings .form-group > .control-group').removeClass('col12 col-12 span12 span-12 col-lg-12 col-md-12 col-sm-12 col-sx-12');
        
        if( $(this).val() === 'form-inline' ) {
            $('.vertical-setting').slideUp();
            $('.horizontal-setting').slideUp();
            $('.inline-setting').slideDown();
        }
        
        if( $(this).val() === 'form-horizontal' ) {
            
            $('.vertical-setting').slideUp();
            $('.inline-setting').slideUp();
            $('.horizontal-setting').slideDown();
            
            var ratio = $('#ratio').val();
            
            $('#form-settings .form-group > .control-label').addClass('col-' + ratio);
            $('#form-settings .form-group > .control-group').addClass('col-' + ( 12 - ratio) );
            
        }
        
        if( $(this).val() === 'form-vertical' ) {
            
            $('.horizontal-setting').slideUp();
            $('.inline-setting').slideUp();
            $('.vertical-setting').slideDown();
            
            $('#form-settings form.form-vertical .form-group > .control-label').addClass('col-12');
            $('#form-settings form.form-vertical .form-group > .control-group').addClass('col-12');
        }
        
    });
    
    
    $('#inline-orientation').change(function() {
        $('#form-settings form').removeClass('inline-top inline-bottom stacked-left stacked-right');
        $('#form-settings form.form-inline').addClass( $(this).val() );
    });
    
    $('#legend').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#form-settings form').removeClass('no-legend');
            $('.legend-setting').slideDown();
        } else {
            $('#form-settings form').addClass('no-legend');
            $('.legend-setting').slideUp();
        }
    });
    
    $('#legend-position').change(function() {
        
        $('#form-settings form legend').removeClass('align-left');
        $('#form-settings form legend').removeClass('align-center');
        $('#form-settings form legend').removeClass('align-right');
        
        $('#form-settings form legend').addClass( $(this).val() );
        
    });
    
    $('#bold-legend').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#form-settings form legend').removeClass('legend-normal');
        } else {
            $('#form-settings form legend').addClass('legend-normal');
        }
    });
    
    $('#bordered').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#form-settings form.form-horizontal').addClass('form-bordered');
            $('#form-settings form.form-vertical').addClass('form-bordered');
            $('.border-setting').slideDown();
        } else {
            $('#form-settings form.form-horizontal').removeClass('form-bordered');
            $('#form-settings form.form-vertical').removeClass('form-bordered');
            $('.border-setting').slideUp();
        }
    });
    
    $('#striped').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#form-settings form.form-horizontal').addClass('form-striped');
            $('#form-settings form.form-vertical').addClass('form-striped');
        } else {
            $('#form-settings form.form-horizontal').removeClass('form-striped');
            $('#form-settings form.form-vertical').removeClass('form-striped');
        }
    });
    
    $('#condensed').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#form-settings form.form-horizontal').addClass('form-condensed');
            $('#form-settings form.form-vertical').addClass('form-condensed');
        } else {
            $('#form-settings form.form-horizontal').removeClass('form-condensed');
            $('#form-settings form.form-vertical').removeClass('form-condensed');
        }
    });

    
    $('#button-position').change(function() {
        
        $('#form-settings form .submit-group').removeClass('align-left');
        $('#form-settings form .submit-group').removeClass('align-center');
        $('#form-settings form .submit-group').removeClass('align-right');
        $('#form-settings form .submit-group').addClass( $(this).val() );

    });
    
    $('#bold-label').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#form-settings form .form-group > label.control-label').removeClass('label-normal');
        } else {
            $('#form-settings form .form-group > label.control-label').addClass('label-normal');
        }
    });
    
    $('#label-position').change(function() {
        $('#form-settings .form-group > .control-label').removeClass('align-left');
        $('#form-settings .form-group > .control-label').removeClass('align-center');
        $('#form-settings .form-group > .control-label').removeClass('align-right');
        $('#form-settings .form-group > .control-label').addClass( $(this).val() );
    });
    
    
    $('#input-size').change(function() {
        
        // control-group class
        $('#form-settings .control-group > .input-size').removeClass('x-small small medium large x-large');
        $('#form-settings .control-group > .input-size').removeClass('col');
        $('#form-settings .control-group > .input-size').removeClass('col1 col-1 span1 span-1 col-lg-1 col-md-1 col-sm-1 col-sx-1');
        $('#form-settings .control-group > .input-size').removeClass('col2 col-2 span2 span-2 col-lg-2 col-md-2 col-sm-2 col-sx-2');
        $('#form-settings .control-group > .input-size').removeClass('col3 col-3 span3 span-3 col-lg-3 col-md-3 col-sm-3 col-sx-3');
        $('#form-settings .control-group > .input-size').removeClass('col4 col-4 span4 span-4 col-lg-4 col-md-4 col-sm-4 col-sx-4');
        $('#form-settings .control-group > .input-size').removeClass('col5 col-5 span5 span-5 col-lg-5 col-md-5 col-sm-5 col-sx-5');
        $('#form-settings .control-group > .input-size').removeClass('col6 col-6 span6 span-6 col-lg-6 col-md-6 col-sm-6 col-sx-6');
        $('#form-settings .control-group > .input-size').removeClass('col7 col-7 span7 span-7 col-lg-7 col-md-7 col-sm-7 col-sx-7');
        $('#form-settings .control-group > .input-size').removeClass('col8 col-8 span8 span-8 col-lg-8 col-md-8 col-sm-8 col-sx-8');
        $('#form-settings .control-group > .input-size').removeClass('col9 col-9 span9 span-9 col-lg-9 col-md-9 col-sm-9 col-sx-8');
        $('#form-settings .control-group > .input-size').removeClass('col10 col-10 span1 span-10 col-lg-10 col-md-10 col-sm-10 col-sx-10');
        $('#form-settings .control-group > .input-size').removeClass('col11 col-11 span1 span-11 col-lg-11 col-md-11 col-sm-11 col-sx-11');
        $('#form-settings .control-group > .input-size').removeClass('col12 col-12 span12 span-12 col-lg-12 col-md-12 col-sm-12 col-sx-12');
        
        $('#form-settings .control-group > .input-size').addClass( $(this).val() );
    });
    
    $('#input-vertical-size').change(function() {
        
        // control-group class
        $('#form-settings .control-group input[type=text]').removeClass('input-sm input-md input-lg');
        $('#form-settings .control-group input[type=password]').removeClass('input-sm input-md input-lg');
        $('#form-settings .control-group input[type=email]').removeClass('input-sm input-md input-lg');
        $('#form-settings .control-group input[type=file]').removeClass('input-sm input-md input-lg');
        $('#form-settings .control-group select').removeClass('input-sm input-md input-lg');
        
        $('#form-settings .control-group input[type=text]').addClass( $(this).val() );
        $('#form-settings .control-group input[type=password]').addClass( $(this).val() );
        $('#form-settings .control-group input[type=email]').addClass( $(this).val() );
        $('#form-settings .control-group input[type=file]').addClass( $(this).val() );
        $('#form-settings .control-group select').addClass( $(this).val() );

    });
    
    $('#ratio').change(function() {
        
        // label class
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col1 col-1 span1 span-1 col-lg-1 col-md-1 col-sm-1 col-sx-1');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col2 col-2 span2 span-2 col-lg-2 col-md-2 col-sm-2 col-sx-2');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col3 col-3 span3 span-3 col-lg-3 col-md-3 col-sm-3 col-sx-3');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col4 col-4 span4 span-4 col-lg-4 col-md-4 col-sm-4 col-sx-4');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col5 col-5 span5 span-5 col-lg-5 col-md-5 col-sm-5 col-sx-5');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col6 col-6 span6 span-6 col-lg-6 col-md-6 col-sm-6 col-sx-6');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col7 col-7 span7 span-7 col-lg-7 col-md-7 col-sm-7 col-sx-7');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col8 col-8 span8 span-8 col-lg-8 col-md-8 col-sm-8 col-sx-8');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col9 col-9 span9 span-9 col-lg-9 col-md-9 col-sm-9 col-sx-8');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col10 col-10 span1 span-10 col-lg-10 col-md-10 col-sm-10 col-sx-10');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col11 col-11 span1 span-11 col-lg-11 col-md-11 col-sm-11 col-sx-11');
        $('#form-settings form.form-horizontal .form-group > .control-label').removeClass('col12 col-12 span12 span-12 col-lg-12 col-md-12 col-sm-12 col-sx-12');

        // control-group class
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col1 col-1 span1 span-1 col-lg-1 col-md-1 col-sm-1 col-sx-1');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col2 col-2 span2 span-2 col-lg-2 col-md-2 col-sm-2 col-sx-2');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col3 col-3 span3 span-3 col-lg-3 col-md-3 col-sm-3 col-sx-3');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col4 col-4 span4 span-4 col-lg-4 col-md-4 col-sm-4 col-sx-4');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col5 col-5 span5 span-5 col-lg-5 col-md-5 col-sm-5 col-sx-5');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col6 col-6 span6 span-6 col-lg-6 col-md-6 col-sm-6 col-sx-6');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col7 col-7 span7 span-7 col-lg-7 col-md-7 col-sm-7 col-sx-7');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col8 col-8 span8 span-8 col-lg-8 col-md-8 col-sm-8 col-sx-8');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col9 col-9 span9 span-9 col-lg-9 col-md-9 col-sm-9 col-sx-8');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col10 col-10 span1 span-10 col-lg-10 col-md-10 col-sm-10 col-sx-10');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col11 col-11 span1 span-11 col-lg-11 col-md-11 col-sm-11 col-sx-11');
        $('#form-settings form.form-horizontal .form-group > .control-group').removeClass('col12 col-12 span12 span-12 col-lg-12 col-md-12 col-sm-12 col-sx-12');
        
        ratio = $(this).val();
        
        $('#form-settings .form-group > .control-label').addClass('col-' + ratio);
        $('#form-settings .form-group > .control-group').addClass('col-' + ( 12 - ratio) );
        
    });
    
    $('#input-position').change(function() {
        $('#form-settings .control-group > .input-size').removeClass('pull-left');
        $('#form-settings .control-group > .input-size').removeClass('align-center');
        $('#form-settings .control-group > .input-size').removeClass('pull-right');
        
        $('#form-settings .control-group > .input-size').addClass( $(this).val() );
    });
    
    
    $('#icon').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            placeIcons();
            $('.icon-setting').slideDown();
        } else {
            removeIcons();
            $('.icon-setting').slideUp();
        }
    });
    
    $('#icon-position').change(function() {
        
       useIcon = $('#icon').bootstrapSwitch('state');
       if(useIcon) {
           removeIcons();
           placeIcons();
       }
       
    });
    
    $('#columns').change(function() {
        
        var columns = $(this).val();
        var legendPosition = ' class="' + $('#legend-position').val() + '"';
        
        // remove ul, fieldset and leged
        $('#form-settings fieldset ul li').unwrap();
        $('#form-settings fieldset li').unwrap();
        $('#form-settings legend').remove();
        
        if(columns === '1') {
            $('#form-settings form.form-horizontal').removeClass('form-column');
            $('#form-settings form.form-vertical').removeClass('form-column');
            
            $('#form-settings form li').wrapAll( '<fieldset class="col-12"><ul></ul></fieldset>' );
            $('#form-settings fieldset:eq(0)').prepend('<legend' +legendPosition+ '>Column 1</legend>');
        }
        
        if(columns === '2') {
            $('#form-settings form.form-horizontal').addClass('form-column');
            $('#form-settings form.form-vertical').addClass('form-column');

            $('#form-settings form li').slice(0, 6).wrapAll( '<fieldset class="col-6"><ul></ul></fieldset>' );
            $('#form-settings form li').slice(6, 12).wrapAll( '<fieldset class="col-6"><ul></ul></fieldset>' );
            
            $('#form-settings fieldset:eq(0)').prepend('<legend' +legendPosition+ '>Column 1</legend>');
            $('#form-settings fieldset:eq(1)').prepend('<legend' +legendPosition+ '>Column 2</legend>');
        }
        
        if(columns === '3') {
            $('#form-settings form.form-horizontal').addClass('form-column');
            $('#form-settings form.form-vertical').addClass('form-column');
            
            $('#form-settings form li').slice(0, 4).wrapAll( '<fieldset class="col-4"><ul></ul></fieldset>' );
            $('#form-settings form li').slice(4, 9).wrapAll( '<fieldset class="col-4"><ul></ul></fieldset>' );
            $('#form-settings form li').slice(9, 12).wrapAll( '<fieldset class="col-4"><ul></ul></fieldset>' );
            
            $('#form-settings fieldset:eq(0)').prepend('<legend' +legendPosition+ '>Column 1</legend>');
            $('#form-settings fieldset:eq(1)').prepend('<legend' +legendPosition+ '>Column 2</legend>');
            $('#form-settings fieldset:eq(2)').prepend('<legend' +legendPosition+ '>Column 3</legend>');
        }
    });
    
    $('#reset').click(function(){
        resetForm(true);
    });
});
